<template>
	<div class="card-tab">
		<div class="card-tab-info">
			<el-form :model="addForm" :rules="addFormRules" ref="addForm" label-width="120px">
				<el-form-item label="图片:" class="upload-box" prop="url">
					<ImageResizerView v-model="addForm.url" :width="636" :height="658" :resizer="false"/>
				</el-form-item>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="标题:" prop="title"><el-input v-model="addForm.title" placeholder="请输入标题" clearable></el-input></el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="标签:" prop="tab"><el-input v-model="addForm.tab" placeholder="请输入标签" clearable></el-input></el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="工厂编号:" prop="factory_sn"><el-input v-model="addForm.factory_sn" placeholder="请输入工厂编号" clearable></el-input></el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="工厂id:" prop="factory_id"><el-input v-model="addForm.factory_id" placeholder="请输入工厂id" clearable></el-input></el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item v-if="addForm.is_house != 0" label="套餐ID:" prop="group_id"><el-input v-model="addForm.group_id" placeholder="请输入套餐ID" clearable></el-input></el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否套餐:" prop="is_house">
							<el-select v-model="addForm.is_house" placeholder="请选择">
								<el-option v-for="item in houseOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="addForm.is_house==4">
						<el-form-item label="小程序Appid:" prop="app_id">
							<el-input v-model="addForm.app_id" placeholder="请输入小程序app_id" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="风格:" prop="style_id">
							<el-select v-model="addForm.style_id" placeholder="请选择">
								<el-option v-for="item in styleOptions" :key="item.style_id" :label="item.style_name" :value="item.style_id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="外链:"><el-input v-model="addForm.link" placeholder="请输入链接地址" clearable></el-input></el-form-item>
					</el-col>
				</el-row>

				<el-form-item label="上下架:" prop="status"><el-switch v-model="addForm.status" :active-value="1" :inactive-value="2"></el-switch></el-form-item>
				<el-form-item label="描述:" prop="item"><el-input v-model="addForm.item" placeholder="请输入描述" type="textarea" :rows="3" clearable></el-input></el-form-item>
			</el-form>
			<el-button @click="cancel()">取 消</el-button>
			<el-button type="primary" @click="submit('addForm')">确 定</el-button>
		</div>
	</div>
</template>

<script>
import ImageResizerView from '@/components/ImageResizerView'
export default {
	components: { ImageResizerView },
	props: {
		layerid: {
			type: String,
			default: ''
		},
		type: {
			type: Number,
			default: 0
		},
		info: Object
	},
	data() {
		return {
			cardInfo: this.info,
			houseOptions: [
				{
					value: 0,
					label: '否'
				},
				{
					value: 1,
					label: 'N98'
				},
				{
					value: 2,
					label: '全屋'
				},
				{
					value: 3,
					label: '活动'
				},
				{
					value: 4,
					label: '其他小程序'
				}
			],
			styleOptions: [],
			addForm: {
				tab_id: this.$route.query.id,
				url: '',
				title: '',
				tab: '',
				item: '',
				factory_sn: '',
				factory_id: '',
				is_house: 0,
				style_id: '',
				group_id: '',
				status: 1,
				link: '',
				app_id: ''
			},
			addFormRules: {
				title: [{ required: true, message: '请输入标题' }],
				url: [{ required: true, message: '请上传图片' }],
				tab: [{ required: true, message: '请输入标签' }],
				item: [{ required: true, message: '请输入描述' }],
				app_id: [{ required: true, message: '请输入小程序app_id' }]
			}
		};
	},
	methods: {
		init() {
			if(this.type == 1){
				this.addForm = this.cardInfo
			}
		},
		submit(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					// type 0新增 1编辑
					if (this.type == 0) {
						this.$http(this.$ApiList.UpTabGoods, this.addForm).then(res => {
							this.$layer.msg(res.datas);
							this.$parent.init();
							this.cancel();
						});
					} else {
						this.$http(this.$ApiList.UpdateTabGoods, this.addForm).then(res => {
							this.$layer.msg(res.datas);
							this.$parent.init();
							this.cancel();
						});
					}
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		getStyleList() {
			let data = {
				style_status: 1,
				limit: 100
			};
			this.$http(this.$ApiList.ClassStyleList, data).then(res => {
				this.styleOptions = res.datas.data;
			});
		},
		cancel() {
			this.$layer.close(this.layerid);
		}
	},
	created() {
		this.init();
		this.getStyleList();
	}
};
</script>
<style lang="scss">
.card-tab {
	width: 100%;
	.card-tab-info {
		padding: 20px 20px;
	}
	.el-upload {
		width: 318px;
		height: 329px;
	}
	.el-icon-plus{
		line-height: 329px;
		font-size: 60px;
	}
}
</style>
